<template>
  <div id="goodslist">
    <!-- 头部 外侧包裹 -->
    <!-- <div>
      <van-nav-bar title="网易严选" >
        <template #left>
          <van-icon name="wap-home-o" size="28" color="black" @click='toHome()'/>
        </template>
        <template #right>
          <van-icon name="search" size="28" color="black" @click='toSearch()'/>
          <van-icon name="shopping-cart-o" size="28" color="black" style="margin-left: 0.3rem; margin-right: 0.07rem" @click='toCart()'/>
        </template>
      </van-nav-bar>
    </div> -->
    
    <!-- 头部固定组件 -->
    <topHeader isFixed>
      <!-- 头部公共组件 -->
      <headJump title="网易严选"></headJump>
      <!-- vant 标签页组件 -->
      <van-tabs v-model="category.id" @click="onClick">
        <van-tab
          v-for="item in categoryL2List"
          :title="item.name"
          :key="item.id"
          :name="item.id"
        >
        </van-tab>
      </van-tabs>
    </topHeader>
    <div>
      
      
      <!-- 使用组件 -->
      <productList :productList="itemList" :title="category.name"></productList>
      <!-- 单独的类目 ‘秋冬款’ 大字 在中间 -->
      <!-- <van-nav-bar :title="category.name" /> -->
      <!-- 展示每一个商品  -->
      <!-- <div class="goodsBlockContainer">
        <div class="goodsBlock" v-for="item in itemList" :key="item.id">
          <div class="goodsImg">
            <img :src="item.listPicUrl" alt="" />
          </div>
          <div class="goodsTitle">{{ item.name }}</div>
          <div class="goodsPrice">
            <span>￥</span>{{ item.sortOriginPrice }}
          </div>
          <div class="youhui"></div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { reqGoodsList } from '@/axios'

export default {
  name: 'GoodsList',
  components: {},
  data() {
    return {
      categoryL2List: [], // 标签滑块
      itemList: [], // 标签下的商品
      category: {}, // 当前标签分类
    }
  },
  created() {
    // 拿到当前的一级分类id
    this.categoryId = this.$route.params.categoryId
  },
  mounted() {
    this.getGoodsList(this.categoryId, this.$route.params.subCategoryId)
  },
  watch: {
    $route(to, from) {
      this.categoryId = this.$route.params.categoryId
      // console.log(this.categoryId, this.$route.params.subCategoryId);
      this.getGoodsList(this.categoryId, this.$route.params.subCategoryId)
    },
  },
  methods: {
    // 获取某个二级分类下的商品列表
    async getGoodsList(categoryId, subCategoryId) {
      // console.log(categoryId, subCategoryId);
      const result = await reqGoodsList(categoryId, subCategoryId)

      this.categoryL2List = result.data.categoryL2List // 标签滑块
      this.category = result.data.categoryItems.category // 当前标签分类
      this.itemList = result.data.categoryItems.itemList // 标签下的商品
    },
    // 点击标签滑块 的相对应二级分类 切换下面的三级商品列表
    onClick(subCategoryId) {
      this.$router.push('/goodslist/' + this.categoryId + '/' + subCategoryId)
    },
    
    // 点导航的左侧icon图标跳首页
    toHome(){
      this.$router.push('/')
    },
    // 点导航的右侧icon图标跳搜索
    toSearch(){
      this.$router.push('/search')
    },
    // 点导航的右侧icon图标跳购物车
    toCart(){
      this.$router.push('/cart')
    }
  },
}
</script>
<style scoped>
#goodslist {
  position: relative;
  height: 100vh;
  overflow: auto;
}
.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 50px;
  top: 0;
  height: 100%;
}
.navbar {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.2rem 0 0.32rem;
  height: 1rem;
  background-color: #fafafa;
}
.pay_z {
  font-size: 20px;
  font-weight: bolder;
}
.goodsBlockContainer {
  width: 100%;
}
.goodsBlock {
  width: 45%;
  float: left;
  padding: 0.24rem;
}
.goodsImg img {
  width: 100%;
  height: 100%;
}
.goodsTitle {
  margin-top: 0.16rem;
  line-height: 0.45rem;
  text-align: left;
  font-size: 0.3rem;
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #12161c;
  font-family: PingFangSC-Regular;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}
.goodsPrice {
  font-size: 0.4rem;
  color: red;
  font-weight: bolder;
}
.goodsPrice span {
  font-size: 0.2rem;
  font-weight: 600;
}
</style>